<template>
    <view class="content">
        <view class="">{{Detail.name}}</view>
        
        <view class="">
            {{Detail.content}}
        </view>
        <view class="category">
            <view class="category-item">
                <image src="@/static/fimg/HomeDetail/collect.png" mode=""></image>
                <view class="">已收藏</view>
            </view>
            <view class="category-item">
                <image src="@/static/fimg/HomeDetail/chat.png" mode=""></image>
                <view class="">聊天</view>
            </view>
            <view class="category-item">
                <image src="@/static/fimg/HomeDetail/like.png" mode=""></image>
                <view class="">关注</view>
            </view>
        </view>
        <view class="charts-box">
            <qiun-data-charts type="arcbar" :loading-type="0" :opts="opts" :animation="false" :chartData="chartData" />
        </view>
        <!-- 弹框背景 -->
        <view class="Pop">
            <view class="Pop-Bg">
                <view class="Pop-close">X</view>
                <view class="Pop-title">恭喜你获得</view>
                <view class="Pop-money">
                    <span class="Pop-money-span">20</span>
                    <span>元佣金</span>
                </view>
                <view class="Pop-time-Bg">
                    3
                </view>
            </view>
        </view>
    </view>

</template>

<script>
    import {request} from "../../utility/apipost.js"
    export default {
        data() {
            return {
                chartData: {},
                //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
                opts: {
                    title: {
                        name: 30 + "S",
                        fontSize: 20,
                        color: "#FC4C17"
                    },
                    subtitle: {
                        name: "",
                        fontSize: 25,
                        color: "#666666"
                    },
                    extra: {
                        arcbar: {
                            type: "circle",
                            width: 4,
                            backgroundColor: "#D5D5D5",
                            startAngle: 1.5,
                            endAngle: 0.25,
                            gap: 2
                        }
                    }
                },
                Timedata: 0,
                timeNumber: 30,
                id: null,
                Detail:{},
            };
        },
        onLoad(option) {
            uni.setNavigationBarTitle({
                title: option.title
            })
            this.id = option.id;
        },
        onReady() {
            this.getServerData();
        },
        mounted() {
            this.getDetail();
        },
        methods: {
            getDetail() {
                request("index/demand_info", {
                   id: this.id
                }).then(res => {
                    console.log("123", res);
                    this.Detail = res.data
                }).catch(err => {
                    console.log(err)
                })
              
            },
            getServerData() {
                //模拟从服务器获取数据时的延时
                setInterval(() => {
                    // console.log(1)
                    let res = {
                        series: [{
                            color: "#FC4C17",
                            data: this.Timedata += 0.03
                        }]
                    };
                    this.chartData = JSON.parse(JSON.stringify(res));
                    this.opts.title.name = this.timeNumber-- + "S"
                }, 1000)
            },
        }
    };
</script>

<style scoped lang="scss">
    .content {
        background-color: #F2F3F7;
        height: 100vh;
    }

    /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
    .charts-box {
        width: 150rpx;
        height: 150rpx;
        position: fixed;
        bottom: 200rpx;
        right: 20rpx;
    }

    .category {
        background-color: #FFFFFF;
        border-radius: 12rpx;
        padding: 0 26rpx;
        height: 100rpx;
        display: flex;
        justify-content: flex-end;
        position: fixed;
        bottom: 0;
        left: 20rpx;
        right: 20rpx;

        .category-item {
            display: flex;
            align-items: center;
            margin-left: 60rpx;

            >image {
                width: 36rpx;
                height: 36rpx;
                margin-right: 10rpx;
            }
        }
    }

    .Pop {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(45, 45, 45, 0.52);
        display: flex;
        align-items: center;
        justify-content: center;

        .Pop-Bg {
            background: url("~@/static/fimg/HomeDetail/PopFrameBG.png");
            background-repeat: no-repeat;
            width: 542rpx;
            height: 610rpx;
            background-size: cover;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            /* 背景图片覆盖整个页面 */
            /* 背景图片居中显示 */
            .Pop-close {
                position: absolute;
                right: 30rpx;
                top: 30rpx;
                width: 30rpx;
                height: 30rpx;
                background-color: #999;
            }

            .Pop-title {
                text-align: center;
                font-weight: 800;
                font-size: 68rpx;
                color: #FA6D7D;
                margin-top: 50rpx;
            }

            .Pop-money {
                color: #333333;
                font-size: 30rpx;
                font-weight: 800;

                .Pop-money-span {
                    color: #FF0025;
                    font-size: 142rpx;
                    font-weight: 800;
                }
            }

            .Pop-time-Bg {
                margin-bottom: 30rpx;
                width: 100rpx;
                height: 100rpx;
                background: url("~@/static/fimg/HomeDetail/CloseBg.png");
                background-repeat: no-repeat;
                background-size: cover;
                font-size: 46rpx;
                font-weight: 800;
                line-height: 100rpx;
                text-align: center;
                color: white;
            }
        }
    }
</style>